<template>
  <div class="digital digital-index">
    <div class="digitalTitle">
      <h2>上海市工业技术学校</h2>
      <p>数字校园智能场景，让智慧设备为您服务</p>
    </div>
    <div class="deviceType">
      <div class="deviceType-inner">
        <p class="deviceType-title">智能设备</p>
        <loading style="margin-top: 80px" v-if="showLoading" size="24px" vertical>加载中...</loading>
        <div class="deviceList">
          <div
            class="content-block deviceDiv"
            v-for="(item, index) in deviceList"
            :key="index"
            @click="goTo(item)"
          >
            <div class="deviceLeft">
              <div
                class="itemIcon"
                :class="
                  'icon' +
                    deviceNameList.find(
                      e => e.deviceName === item.equipmentTypeName
                    )[item.equipmentTypeName]
                "
              ></div>
              <p class="itemTitle">{{ item.equipmentTypeName }}</p>
            </div>
            <div class="deviceRight">
              <p>
                数量：<label>{{
                  item.equipmentTypeName === "消防栓" ? 8 : item.totalCount
                }}</label>
              </p>
              <p>
                异常：<label>{{ item.abnormalCount }}</label>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from "vant";
import { getDigitalOverview } from "@/api/Digital";
import { deviceNameList } from "./uuid2num";
export default {
  name: "overview",
  components: {
    Loading
  },
  data() {
    return {
      showLoading: false,
      deviceNameList: deviceNameList,
      deviceList: []
    };
  },
  computed: {
    uuid2num() {
      return uuid2num;
    }
  },
  mounted() {
    this.getDigitalOverview();
  },
  methods: {
    async getDigitalOverview() {
      this.showLoading = true
      this.deviceList = [];
      let res = await getDigitalOverview();
      if (res.code === 0) {
        this.showLoading = false
        res.data.forEach(item => {
          this.deviceList.push(Object.assign({}, item));
        });
      }
    },
    // 根据设备id获取跳转后的页面标题
    getDeviceName(id) {
      let result;
      for (let i of this.deviceNameList) {
        if (i.deviceId === id) {
          result = i.deviceName;
        }
      }
      return result;
    },
    goTo(v) {
      if (v.equipmentTypeName === '教学楼空调监测') {
        window.location.href = 'http://apmon.zexin-smart.com'
      } else {
        this.$store.commit("setDeviceName", v.equipmentTypeName); //this.getDeviceName(id)); // 跳转到设备详情页的标题 如：智能烟感
        // if (["空气监测"].includes(v.equipmentTypeName)) {
        //   this.$router.push({
        //     path: "/digital/air",
        //     query: {
        //       equipmentTypeId: v.equipmentTypeId
        //     }
        //   });
        //   return;
        // }
        this.$router.push({
          path: "/digital/device",
          query: {
            data: JSON.stringify(v)
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.digital-index {
  height: calc(100% - 45px);
}
.digital {
  .digitalTitle {
    height: 65px;
    margin-top: 40px;
    h2 {
      font-size: 25px;
      font-weight: 500;
      text-align: left;
      color: #fff;
      letter-spacing: 5px;
      margin-left: 5%;
    }
    p {
      font-size: 13px;
      font-weight: 500;
      text-align: left;
      color: #fff;
      letter-spacing: 3px;
      margin-top: 10px;
      margin-left: 5%;
    }
  }
  .deviceType {
    height: calc(100% - 90px);
    margin-top: 28px;
    overflow: auto;
    p.deviceType-title {
      margin-top: 12px;
      margin-left: 5%;
      font-size: 19px;
      font-weight: 600;
      text-align: left;
      color: #333;
      letter-spacing: 2px;
    }
    .deviceList {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 15px;
      //justify-content: space-between;
      .deviceDiv {
        margin: 15px 0 0 4%;
        width: 44%;
        height: 90px;
        padding: 5px 0 10px 0;
        box-sizing: border-box;
        overflow: hidden;
        .deviceLeft {
          float: left;
          width: 50%;
          height: 100%;
          padding-right: 3px;
          border-right: 1px solid rgba(204, 204, 204, 0.6);
          .itemIcon {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            // background-image: url("../../assets/images/Digital/numberIcon.png");
            // background-size: 335px 50px;
            background-size: contain;
            background-repeat: no-repeat;
          }

          .icon1 {
            background-image: url("../../assets/images/Digital/1.png");
          }
          .icon2 {
            background-image: url("../../assets/images/Digital/2.png");
          }
          .icon3 {
            background-image: url("../../assets/images/Digital/3.png");
          }
          .icon4 {
            background-image: url("../../assets/images/Digital/4.png");
          }
          .icon5 {
            background-image: url("../../assets/images/Digital/5.png");
          }
          .icon6 {
            background-image: url("../../assets/images/Digital/6.png");
          }
          .icon7 {
            background-image: url("../../assets/images/Digital/7.png");
          }
          .icon8 {
            background-image: url("../../assets/images/Digital/8.png");
          }
          .icon9 {
            background-image: url("../../assets/images/Digital/9.png");
          }
          .icon10 {
            background-image: url("../../assets/images/Digital/10.png");
          }
          .icon11 {
            background-image: url("../../assets/images/Digital/11.png");
          }
          .icon12 {
            background-image: url("../../assets/images/Digital/12.png");
          }
          .icon13 {
            background-image: url("../../assets/images/Digital/13.png");
          }
          .icon14 {
            background-image: url("../../assets/images/Digital/14.png");
          }
          .icon15 {
            background-image: url("../../assets/images/Digital/15.png");
          }
          .icon16 {
            background-image: url("../../assets/images/Digital/16.png");
          }
          .icon17 {
            background-image: url("../../assets/images/Digital/17.png");
          }
          .icon18 {
            background-image: url("../../assets/images/Digital/18.png");
          }
          .icon19 {
            background-image: url("../../assets/images/Digital/19.png");
          }
          // .icon1 {
          //   background-position: -95px 0; //烟感
          // }
          // .icon2 {
          //   background-position: -45px 0; // 燃气
          // }
          // .icon3 {
          //   background-position: 0 0; // 水压
          // }
          // .icon4 {
          //   background-position: -285px 0; // 井盖
          // }
          // .icon5 {
          //   background-position: -140px 0; // 温感
          // }
          // .icon6 {
          //   background-position: -237px 0; // 空气监测
          // }
          // .icon7 {
          //   background-position: -190px 0; // 灯控
          // }
          .itemTitle {
            font-size: 13px;
            font-weight: 500;
            text-align: center;
            color: #333;
            //width: 100px;
          }
        }
        .deviceRight {
          float: left;
          margin-left: 5px;
          margin-top: 10px;
          p {
            width: 100%;
            font-size: 13px;
            color: #666;
            font-weight: 500;
            margin-top: 5px;
          }
          label {
            font-size: 13px;
            color: #333;
            font-weight: 700;
            letter-spacing: 0;
          }
        }
      }
    }
  }
  @media screen and (max-width: 320px) {
    .digitalTitle {
      margin-top: 20px;
    }
    .deviceType {
      height: calc(100% - 60px);
      margin-top: 18px;
      .deviceList {
        .deviceDiv {
          padding: 5px;
          .deviceLeft {
            width: 45%;
            padding-right: 2px;
          }
        }
      }
    }
  }
}
</style>
